<template>
  <div class="container">
    <div>
      <div
        class="c-m-submenu__scroll d-flex justify-content-between align-items-center"
      >
        <a
          target="_blank"
          href="https://www.qweather.com/weather/changsha-101250101.html"
        >今天</a>
        <a
          target="_blank"
          href="https://www.qweather.com/weather30d/changsha-101250101.html"
        >30天预报</a>
        <a href="https://www.qweather.com/pcpn/changsha-101250101.html">降水</a>
        <a
          target="_blank"
          href="https://www.qweather.com/air/changsha-101250101.html"
        >空气质量</a>
        <a
          target="_blank"
          href="https://www.qweather.com/severe-weather/changsha-101250101.html"
        >灾害预警</a>
        <a
          href="https://www.qweather.com/indices/changsha-101250101.html"
          target="_blank"
          rel="noopener noreferrer"
        >生活指数</a>
        <a
          target="_blank"
          href="https://www.qweather.com/historical/changsha-101250101.html"
        >历史数据</a>
      </div>
      <div>
        <img src="@/assets/weather.png" alt="天气显示区域">
      </div>
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style  scoped>
.container {
  width: 500px;
}
img {
padding-top: 15px;
  width: 100%;
  height: 280px;
}
a {
  transition: background-color 0.5s;
  font-size: smaller;
  margin-left:5px ;
  color: rgb(4, 97, 141);
}
a:hover {
  background-color: rgb(164, 171, 165);
}
</style>

